<template>
  <view class="u-flex-1">
    <u-input v-model="showValue" :placeholder="placeholder" type="select" :border="false" @click="show = true"
      :select-open="show" :input-align="inputAlign" />
    <u-select v-model="show" :label-name="labelName" :value-name="valueName" :list="list" :default-value="defaultVal"
      @confirm="selectConfirm"></u-select>
  </view>

</template>

<script>
export default {
  name: "yer-select",
  props: {
    list: {
      type: Array,
      default: () => [],
    }, //字典的数组集合
    defaultValue: "", //默认显示的字典，传字典的代码项
    defaultValueExtra: "", //默认显示的字典，传字典的代码项
    inputAlign: {
      type: String,
      default: "left",
    }, //input内容对齐方式三种：left  center  right  默认left
    placeholder: {
      type: String,
      default: "请选择",
    },
    labelName: {
      type: String,
      default: "label",
    },
    valueName: {
      type: String,
      default: "value",
    }
  },
  emits: ["update:modelValue", "update:label","input","change"],
  data() {
    return {
      showValue: "",
      value: "", //字典展示的值，对应的是字典名称
      show: false, //控制select弹框的显示
      defaultVal: [0], //默认值（是字典数组的下标）
    };
  },
  methods: {
    clear() {
      this.showValue = "";
      this.value = "";
    },
    selectConfirm(e) {
      // console.log("select设置值",e);
      this.showValue = e[0]["label"];
      this.$emit("update:modelValue", e[0]["value"]);
      this.$emit("input", e[0]["value"]);
      this.$emit("update:label", e[0]["label"]);
      // 增加一个change事件
      this.$emit("change", e[0]);
      //选择后把默认值设为当前选择的
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i][this.valueName] == e[0]["value"]) {
          this.defaultVal = [i];
          return;
        }
      }
    },
  },
  watch: {
    // value: function (newVal, oldVal) {
    //   this.$emit("update:modelValue", newVal);
    //   this.$emit("input", newVal);
    // },
    defaultValue: {
      immediate: true,
      handler: function (newVal, oldVal) {
        console.log('default',newVal);
        let val = this.defaultValue;
        if (!newVal) {
          val = oldVal;
        }
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i][this.valueName] == val) {
            console.log("selected",val);
            this.showValue = this.list[i][this.labelName];
            this.defaultVal = [i];
            this.$emit("update:modelValue", val);
            this.$emit("input", val);
            this.$emit("update:label", this.showValue);
            return;
          }
        }
      },
    },
    list: {
      immediate: true,
      handler: function (newVal, oldVal) {
        // console.log('list',newVal);
        let val = this.defaultValue;
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i][this.valueName] == val) {
            this.showValue = this.list[i][this.labelName];
            this.defaultVal = [i];
            return;
          }
        }
      },
    }
  }
};
</script>

<style scoped>
::v-deep .u-input__input {
  pointer-events: none;
}
</style>
